import React from 'react';

interface ModulePageProps {
  moduleName: string;
  moduleDescription: string;
  features?: Array<{ title: string; description: string }>;
  quickActions?: Array<{ icon: string; label: string; action: () => void }>;
}

const ModulePage: React.FC<ModulePageProps> = ({ 
  moduleName, 
  moduleDescription, 
  features = [], 
  quickActions = [] 
}) => {
  return (
    <div style={{ 
      position: 'relative', 
      width: '100%', 
      height: '100%', 
      overflow: 'auto',
      color: 'white',
      padding: '20px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <h1 style={{
        fontSize: '2rem',
        fontWeight: 'bold',
        marginBottom: '1rem',
        background: 'linear-gradient(90deg, #ffffff, #61dca3)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        textShadow: '0 0 10px rgba(97, 220, 163, 0.3)'
      }}>
        {moduleName}
      </h1>
      
      <div style={{
        width: '100%',
        maxWidth: '800px',
        padding: '2.5rem',
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
        backdropFilter: 'blur(15px)',
        border: '1px solid rgba(255, 255, 255, 0.1)',
        borderRadius: '20px',
        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
        animation: 'fadeInUp 0.8s ease-out',
        color: 'white'
      }}>
        <p style={{ marginTop: '1rem' }}>{moduleDescription}</p>
        
        {features.length > 0 && (
          <div style={{ marginTop: '2rem' }}>
            <h2>功能特性</h2>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(2, 1fr)',
              gap: '1rem',
              marginTop: '1rem'
            }}>
              {features.map((feature, index) => (
                <div 
                  key={index}
                  style={{
                    padding: '1rem',
                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
                    borderRadius: '10px'
                  }}
                >
                  <h3>{feature.title}</h3>
                  <p>{feature.description}</p>
                </div>
              ))}
            </div>
          </div>
        )}
        
        {quickActions.length > 0 && (
          <div style={{ marginTop: '2rem' }}>
            <h2>快捷操作</h2>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gap: '1rem',
              marginTop: '1rem'
            }}>
              {quickActions.map((action, index) => (
                <button 
                  key={index}
                  style={{
                    padding: '1rem',
                    backgroundColor: 'rgba(97, 220, 163, 0.2)',
                    border: 'none',
                    borderRadius: '10px',
                    color: 'white',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseEnter={(e) => {
                    (e.target as HTMLElement).style.background = 'rgba(97, 220, 163, 0.3)';
                  }}
                  onMouseLeave={(e) => {
                    (e.target as HTMLElement).style.background = 'rgba(97, 220, 163, 0.2)';
                  }}
                  onClick={action.action}
                >
                  <div style={{ fontSize: '2rem' }}>{action.icon}</div>
                  <div>{action.label}</div>
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
      
      <style>
        {`
          @keyframes fadeInUp {
            from {
              opacity: 0;
              transform: translateY(30px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
        `}
      </style>
    </div>
  );
};

export default ModulePage;